* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 14px;
}
body {
    width: 100%;
    height: 100%;
    min-width: 1300px;
}
a {
    font-size: 0;
    text-decoration: none;
}

/* 导航栏开始  */
#a1 {
    width: 100%;
    height: 58px;
    background-color: #191d3a;
}

.a1-a1 {
    width: 1000px;
    height: 58px;
    position: relative;
    margin: 0 auto;
}

.a1-a1 img {
    margin-left: 20px;
}

.a1-a2 {
    width: 800px;
    position: absolute;
    display: inline-block;
    margin-left: 42px;
    top: 0;
}

.a1-a2 ul li {
    width: 85px;
    height: 58px;
    float: left;
    text-align: center;
    color: #818496;
    font: 1.166em/58px "Microsoft YaHei", "simhei";
    list-style-type: none;
}

.a1-a2 ul li:hover {
    background-color: #252947;
    color: #e2e4ed;
}
.a1-a2 ul .aaaaaaa {
    color: white;
    background-color: #252947;
}
.a1-a1 a {
    width: 98px;
    height: 32px;
    display: inline-block;
    margin: 12px 0 0 120px;
    border: 1px solid #3aca7a;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #38b774;
    font-size: 1.166em;
    color: #fff;
    text-align: center;
    line-height: 32px;

}

/* 导航栏结束 */





/* 大图片开始 */
#b {
    width: 100%;
    height: 254px;
    background-color: rosybrown;
    background: url('./../img/003.jpg') repeat-x center top;
    ;
}

/* 大图片结束  */

/* 大图片下面的线及内容开始  */
#center {
    width: 1000px;
    height: 1267px;
    margin: 0 auto;
}
#c {
    width: 1000px;
    height: 29px;
    margin: 0 auto;
    padding: 25px 0px 15px; 
    border-bottom: 1px #c7d6e5 solid;
}
#c h2 {
    line-height: 29px;
    font-size: 20px;
    color: #444866;
    display: inline-block;
    padding-left: 30px;
    background: url('./../img/001.png') no-repeat 0px -94px;
}
#c span {
    width: 93px;
    height: 20px;
    float: right;
    line-height: 20px;
    margin-top: 4px;
}
#c span em::before {
    content: url('./../img/sanjiaoxing.png');
    padding: 0px 8px;
}
#c span label {
    font-size: 12px;
    color: #444866;
}
/* 大图片下面的线及内容结束  */

/* 左侧精灵图开始  */
#d {
    width: 195px;
    height: 405px;
    padding-top: 40px;
    display: inline-block;
}
#d ul li {
    width: 143px;
    height: 80px;
    list-style-type: none;
    position: relative;
    border-bottom: 1px gray solid;
}

#d ul li a{
    font: 1.333em/80px Arial;
    padding-left: 52px;
    color: #444866;
}
#d ul li .aaaaa {
    display: block;
    background: url('./../img/sanjiaoxing.png') no-repeat right center;
    color: #38b774;
}
#d ul li a .iphone{
    background: url('./../img/005.png') no-repeat -125px 0;
}
/* 鼠标悬浮字体改变 */
#d ul li:hover a{
    color: #38b774;
}
/* 鼠标悬浮字体改变 */
/* 鼠标悬浮图标改变 */
#d ul li:hover .iphone{
    background: url('./../img/005.png') no-repeat -125px 0;
}
#d ul li:hover .android {
    background: url('./../img/005.png') no-repeat -124px -97px;
}
#d ul li:hover .ipad {
    background: url('./../img/005.png') no-repeat -121px -199px;
}
#d ul li:hover .pc{
    background: url('./../img/005.png') no-repeat -120px -295px;
}
#d ul li:hover .tv {
    background: url('./../img/005.png') no-repeat -43px -602px;
}
/* 鼠标悬浮图标改变 */


#d ul li .iphone {
    width: 34px;
    height: 41px;
    position: absolute;
    top: 23px;
    left: 0px;
    background: url('./../img/005.png') no-repeat ;
}


#d ul li .android {
    width: 34px;
    height: 41px;
    position: absolute;
    top: 23px;
    left: 0px;
    background: url('./../img/005.png') no-repeat -4px -97px;
}




#d ul li .ipad {
    width: 34px;
    height: 41px;
    position: absolute;
    top: 23px;
    left: 0px;
    background: url('./../img/005.png') no-repeat 0 -199px;
}
#d ul li .pc {
    width: 34px;
    height: 41px;
    position: absolute;
    top: 23px;
    left: 0px;
    background: url('./../img/005.png') no-repeat 0 -295px;
}
#d ul li .tv {
    width: 34px;
    height: 41px;
    position: absolute;
    top: 23px;
    left: 0px;
    background: url('./../img/005.png') no-repeat 0 -602px;
}
/* 左侧精灵图结束 */

/* 右侧主题内容开始  */
#f {
    width: 757px;
    height: 1113px;
    float: right;
    padding-bottom: 44px;
      
}
#f ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#f ul li {
    width: 355px;
    height: 327px;
    margin-top: 44px;
    border-radius: 8px;
    background-color: #f7f7f7;
    border: 1px #c7d6e5 solid;
    box-sizing: border-box;
    list-style-type: none;
}
#f ul li h3 {
    width: 355px;
    height: 55px;
    padding-top: 3px;
    text-align: center;
    line-height: 55px;
}
#f ul li h3 a {
    font-size: 16px;
    font-weight: 500;
    color: #444866;
}
#f ul li h3 a span {
    font-size: 12px;
    color: #38b774;
    margin-left: 4px;
    background: url('./../img/021.png') no-repeat right center;
    padding-right: 13px;
}
#f .f-a img {
    display: block;
    margin: 0 auto;
}
.f-b {
    width: 331px;
    height: 36px;
    margin: 20px auto 0;
}
.f-b-a {
    width: 169px;
    height: 36px;
    display: inline-block;
    line-height: 36px;
    text-align: center;
    border-right: 1px gray solid;
}
.f-b-a a {
    font-size: 16px;
    display: inline-block;
    line-height: 36px;
    padding-left: 45px;
    margin-bottom: 8px;
    color: #444866;
    background: url('./../img/010.png') no-repeat 0 -347px;
}

.f-b-b {
    width: 160px;
    height: 36px;
    float: right;
    line-height: 36px;
    text-align: center;  
}
.f-b-b a {
    font-size: 16px;
    display: inline-block;
    line-height: 36px;
    padding-left: 45px;
    color: #444866;
    background: url('./../img/010.png') no-repeat 0 -448px;
}

/* 右侧主题鼠标悬浮变色开始 */
#f ul li:hover {
    background-color: white;
}
#f ul li .f-b-a:hover a{
    color: #38b774;
}
#f ul li .f-b-b:hover a{
    color: #38b774;
}
/* 右侧主题内容结束  */






/* 底部导航栏开始 */
#a5 {
    width: 100%;
    height: 190px;
    position: relative;
    background-color: #191d3a;
    }
.a5-a {
    width: 1000px;
    height: 190px;
    margin: 0 auto;
    position: relative;
}
.a5-a .a5-a-1 span {
    width: 1000px;
    height: 49.6px;
    display: block;
    padding-top: 35px;
    color: #6c6e7e;
}
.a5-a .a5-a-1 span a{
    font-size: 12px;
    color: #6c6e7e;
}

.a5-a .a5-a-1 span a:hover {
    color: white;
}

.a5-a .a5-a-2 span {
    width: 1000px;
    height: 49.6px;
    display: block;
    color: #6c6e7e;
}
.a5-a .a5-a-2 span a{
    font-size: 12px;
    color: #6c6e7e;
}

.a5-a .a5-a-3 span {
    width: 1000px;
    height: 49.6px;
    display: block;
    color: #6c6e7e;
}
.a5-a .a5-a-3 span a{
    font-size: 12px;
    color: #6c6e7e;
}
.a5-a .a5-a-3 span a img{
    width: 20px;
    height: 20px;
}
.a5-a-5 a{
    width: 68px;
    height: 29px;
    display: block;
    position: fixed;
    right: 10%;
    bottom: 160px;
    background: url('./../img/top\ \(2\).png') no-repeat right top;
}
.a5-a-5 a:hover {
    background: url('./../img/top\ \(2\).png') no-repeat 0px -40px;
}
/* 当屏幕缩小到1350像素以下时，使用了固定布局的top按钮将会从距离右边框的10%移到5% */
@media screen and (max-width: 1350px) {
    .a5-a-5 a {
        right: 2%
    }
}
/* 底部导航栏结束  */

